<template>
  <el-cascader :value="value" size="mini" :options="options" :props="props" separator="-" clearable @change="treeChange" />
</template>

<script>
import { departmentAPI } from '@/api/department'
import { tree2List } from '@/utils'
export default {
  props: {
    value: {
      type: Number,
      default: 1
    }
  },
  data() {
    return {
      options: [],
      // 绑定的数组里面的数据
      props: {
        label: 'name',
        value: 'id'
      }
    }
  },
  async created() {
    // 获取部门架构
    const res = await departmentAPI()
    // 转换为树的结构
    this.options = tree2List(res.data.data)
  },
  methods: {
    treeChange(arr) {
      // 父页面绑定的是 v-model = input + v-bind ,这里是input事件
      // 把树里面获取到 部门id数组选最后一个传回父页面
      this.$emit('input', arr[arr.length - 1])
    }
  }
}
</script>
